<template>
  <div class="all" v-if="this.$store.state.datalist">
     <div class="header">
        <van-nav-bar title="商品详情" left-text="" left-arrow>
            <van-icon name="wap-home-o cont1" slot="left" @click="jumpIndex()" />
            <van-icon name="search cont2" slot="right" />
          </van-nav-bar>
      </div>

      <div class="swiper">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item  v-for="data in pic" :key="data">
            <img :src="data" alt="">
          </van-swipe-item>
        </van-swipe>

        <div class="tit">
          <p>{{this.$store.state.datalist.productTitle}}</p>
          <h3>¥{{this.$store.state.datalist.sellPrice}}</h3>
        </div>

        <div class="full">
          <p>每满300-30，最高减2000</p>
          <p>2020-03-04 - 2020-03-08</p>
        </div>
      </div>

      <div class="bg">
        <img class="logo" src="https://img.wowdsgn.com/brand/logo/e8872ed8-f252-4fe8-baa8-bd0210e41eac_2dimension_800x800.jpg?imageslim" alt="">
        <p>丘山 ARTISAN</p>
        <p>
         罡风吹散不了热爱
“少无适俗韵，性本爱丘山”，丘山意指自然、质朴的生活方式，这也是我们的追求。以实木为材，辅以传统手工艺，我们专注于设计并制作简约自然的现代家具，丘山希望带来做工精致、注重细节的高品质手工家具。
家，是我们所处时间最长的空间，丘山偏爱自然、质朴可以让人放松心情的家，亦如我们的家具，拥有手作的质感，同时保持现代家具的舒适性。丘山希望自己的家具可以长久使用，与家共存。
丘山位于北京，开始于2015年。从设计图稿、挑选木材、寻找手工艺者，再到家具打样改进，我们用了超过一年的时间思考与调整，每一步都为了接近心中的更好。比起快速发展，我们更愿意细水长流，静下来做好每一件细小的事情，这正源于我们对此的热爱。
        </p>
      </div>

      <div class="content" v-if="detailList.itemDetailIntroVoList">
        <ul>
          <li v-for="(data,index) in detailList.itemDetailIntroVoList" :key="index">
            <img :src="data.content" alt="">
          </li>
        </ul>
      </div>

<!-- 产品信息 -->
      <div class="prodmsg">
          <div class="head">
            <p>__</p>
            <div>
                <p>产品信息</p>
              <p>INFORMATION</p>
            </div>
            <p>__</p>
          </div>
          <div class="urlimg" v-for="(item,index) in detailList.itemSizeImgVoList" :key="index">
            <img :src="item.imgUrl" alt="">
          </div>
          <div class="size" >
            <p v-for="(item,index) in tabSize" :key="index">
              <span>{{item.attributeName}}</span>
              <span>{{item.attributeValueText}}</span>
            </p>
          </div>
      </div>

       <div class="prodmsg">
          <div class="head">
            <p>__</p>
            <div>
                <p>其他信息</p>
              <p>OTHER</p>
            </div>
            <p>__</p>
          </div>
          <div class="promise">
            <p>服务承诺</p>
            <van-icon name="arrow" @click="show1()" />
          </div>

          <div class="seven" v-show="isShow1">
             <div class="left">
                <img src="../../public/img/promise2.png" alt="">
                <p>价格保障/变动返差价</p>
                <p>7日保价</p>
             </div>
             <img src="../../public/img/dashLine.png" alt="" style="width=1px">
             <div class="rigth">
                <img src="../../public/img/promise3.png" alt="">
                 <p>三年内质保</p>
                <p>7日退换</p>
             </div>
          </div>

           <div class="promise">
              <p>价格说明</p>
              <van-icon name="arrow" @click="show2()" />
            </div>
          <div v-show="isShow2" class="text">
            <p>
              划线价格：划线的价格可能是商品的专柜价、吊牌价、正品零售价、指导价、曾经展示过的销售价等，仅供您参考
            </p>
            <p>
              未划线价格：未划线的价格是商品的销售标价，具体的成交价格可能因会员使用优惠券、积分等发生变化，最终以订单结算价格为准。
            </p>
            <p>
                * 此说明仅当出现价格比较时有效。若这件商品针对划线价格进行了特殊说明，以特殊说明为准
            </p>
          </div>
      </div>
      
      <div class="prodmsg">
        <div class="head">
          <p>__</p>
          <div>
            <p>猜你喜欢</p>
            <p>WHAT’S HOT</p>
          </div>
          <p>__</p>
          </div>
          <!-- <div class="guesslike">
              <div class="like" v-for="data in guessList" :key="data.parentProductId">
                  <img :src="data.productImg" alt="">
                  <p>{{data.productTitle}}</p>
                  <p>{{data.sellPrice}}¥</p>
               </div>
          </div> -->
          <div class="guesslike">
            <msg v-for="item in guessList" :key="item.parentProductId" :item="item"></msg>
          </div>
      </div>

      <div class="help">
        <span class="tee">需要帮助</span>
        <span class="time">周一至周日  9:00 - 21:00</span>
        <van-icon name="service-o" />
      </div>

      <div class="tab">
        <van-tabbar v-model="active">
          <van-tabbar-item icon="shopping-cart-o"></van-tabbar-item>
          <van-tabbar-item icon="like-o"></van-tabbar-item>
          <van-tabbar-item>加入购物车</van-tabbar-item>
          <van-tabbar-item>立即购买</van-tabbar-item>
        </van-tabbar>
      </div>
  </div>
</template>
<script>
import Vue from 'vue'
import axios from "axios";
import msg from '@/components/msg'
import { NavBar,Icon,Swipe, SwipeItem,Tabbar, TabbarItem,Grid, GridItem,Image,Lazyload } from 'vant'
Vue.use(NavBar).use(Icon).use(Swipe).use(SwipeItem).use(Tabbar).use(TabbarItem).use(Grid).use(GridItem).use(Image).use(Lazyload)
import { Toast } from 'vant'
export default {
  data() {
    return {
      tabSize:[],
      active:'',
      detailList:[],
      guessList:[],
      isShow1:false,
      isShow2:false,
      myid:'',
      pic:['https://img.wowdsgn.com/product/addtionalImage//d2e16133-2e7c-45c9-8606-781a4ef63d7b_2dimension_750x600.jpg?imageView2/1/w/640/h/512','https://img.wowdsgn.com/product/addtionalImage//7d657ef9-3c12-4cc1-b1db-952b6d5a84c7_2dimension_750x600.jpg?imageView2/1/w/640/h/512','https://img.wowdsgn.com/product/images/59e90112-c5b1-4b6f-84da-63502af47c9b_2dimension_800x800.jpg?imageView2/1/w/640/h/512']
    }
  },
  components :{
    msg
  },
  mounted() {
    this.myid=this.$route.params.id
    console.log(this.$store.state.datalist)
    if (this.$store.state.datalist.parentProductId) {
      axios(`/itemdetail/spuInfos/${this.$store.state.datalist.parentProductId}`).then(res=>{//数据1:详情图片数据
        this.detailList=res.data.data
        console.log(res.data.data)
      })
    }
    axios(`/itemdetail/skuInfos/${this.myid}`).then(res=>{//数据2:尺寸等数据
      this.tabSize=res.data.data.skuAttrPairs
      console.log(res.data.data.skuAttrPairs)
    })
    axios(`/recommend/item?skuId=${this.myid}&_=1583305404798`).then(res=>{//数据3:关联数据
      this.guessList=res.data.data
      console.log(res.data.data)
    })
    console.log(this.$store.state.datalist)
  },
  methods: {
    show1() {
      this.isShow1=!this.isShow1
    },
    show2() {
      this.isShow2=!this.isShow2
    },
    jumpIndex(){
      this.$router.push('/index')
    },
    jumpSerch(){
      this.$router.push('/search')
    }
  },
}
</script>
<style lang="scss" scoped>
    html,body{
      width: 100%;
      height: 100%;
      background-color: rgb(226, 224, 224);
    }
    *{
      margin: 0px;
      padding: 0px;
    }
    html {
          font-size: 13.3vw
        }
    .all{
        padding-bottom: 4rem;
        background-color: hsl(0, 11%, 95%);
      }
    // img{
    //   width: 100%;
    // }
    li{
      list-style: none;
    }

    .swiper{
        my-swipe .van-swipe-item {
        color: #fff;
        font-size: 0.4rem;
        line-height: 3rem;
        height: 6rem;
        text-align: center;
        background-color: #39a9ed;
      }
      .van-swipe-item img{
            width: 100%;
          }
    }

    .tit{
      width: 100%;
      padding: 5%;
      box-sizing: border-box;
      background-color: #fff;
      margin-top: -0.2rem;
        p{
          margin-bottom: 0.2rem;
        }
      }

    .header{ // 轮播和标题
        .cont1{
        font-size: 1.5rem;
        color: black;
      }
      .cont2{
        font-size: 1.2rem;
        color: black;
      }
      .van-nav-bar__title{
        max-width: 90%;
        font-size: 20px;
        font-weight: 800;
      }
    }
    .full{//满减
      border-top: .5px solid #d4cbcbec;
      background-color: #fff;
      padding: 0.8rem 1rem;
    }

    .prodmsg{
      width: 100%;
      position: relative;
      .urlimg{
        img{
            width: 100%;
        }
      }

      .head{
        width: 10rem;
        margin: 0 auto;
        height: 4.1rem;
        text-align: center;
        >p,div{
          float: left;
          p{
            width: 7.5rem;
            margin: 0.5rem 0px;
            text-align: center;
          }
        }
      }
    }

    .content{
      li{
        margin-bottom: 0.4rem;
        img{
          width: 100%;
        }
      }
    }
//背景
    .bg{
      margin: 0.4rem 0px;
      background: url("../../public/img/bg.png") no-repeat -4rem -10rem;
      height: 6.24rem;
      position: relative;
      padding: 2.44rem 8rem;
      box-sizing: border-box;
      p{
        text-align: center;
        color: #fff;
        font-size: 1.04rem;
      }
      p:nth-of-type(2){
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.8rem;
      }
//logo
      .logo{
        width: 4.88rem;
        height: 4.88rem;
        border-radius: 50%;
        position: absolute;
        top:1rem;
        left: 2rem;
      }
    }
    // 七天无理由,购物保障
    .promise{
      display: flex;
      width: 100%;
      height: 5rem;
      line-height: 2rem;
      justify-content: space-between;
      padding: 1.5rem 5%;
      box-sizing: border-box;
      background-color: #fff;
      i{
        line-height: 2rem;
      }
    }

     .seven{
        background: url('../../public/img/servicepromise_bg.png') no-repeat;
        display: flex;
        justify-content: space-around;
        align-content: center;
        font-size: 0.4rem;
        height: 6rem;
        color: #fff;
        div{
          align-self: center;
          text-align: center;
          p:nth-of-type(2){
            font-size: 0.8rem;
            }
          img{
                width: 2rem;
            }
          }
        }

      .text{
        padding: 0.4rem 2rem;
        background-color: #fff;
        color: rgb(112, 109, 109);
      }
//商品尺寸
    .size{
      background-color: #fff;
      p{
        height: 2rem;
        margin: 0 8%;
        border-bottom: .5px solid #d4cbcbec;
        font-size: 0.7rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        span:nth-of-type(2){
          margin-left: 12rem;
        }
      }
    }

 //猜你稀罕
   .guesslike{
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    width: 100%;
    font-size: 0.72rem;}
//需要帮忙
  .help{
    margin-top: 0.6rem;
    height: 2.4rem;
    line-height: 2.4rem;
    background-color: #fff;
    font-size: 0.74rem;
    padding: 0 5%;
    box-sizing: border-box;
    .time{
      margin-left: 0.6rem;
      color: #ff0000;
    }
    i{
      float: right;
      font-size: 1.6rem;
    }
  }

    .tab{ //底部
     .van-tabbar-item{
       font-size: 16px;
     }
     .van-tabbar-item--active{
       color: red;
     }
      .van-tabbar-item:nth-child(3){
        background-color: hsla(60, 2%, 90%, 0.973);
      }
      .van-tabbar-item:nth-child(4){
        background-color: rgb(243, 175, 47);
      }
    }
</style>